<template>
	<view>
		<cu-custom :bgColor="'bg-' + theme.themeColor" :isBack="true">
			<block slot="content">{{pageDesign.pageName}}</block>
		</cu-custom>
		<view v-if="orderInfo">
			
			<view class="bg-white margin-xs  padding">
				<view class="text-red" v-if="orderInfo.statusDesc">
					{{orderInfo.statusDesc}}
				</view>
				<view v-if="orderInfo.status == '1'" style="margin-top:10px ;">
					请在30分钟内付款，超时订单自动取消
				</view>
			</view>
			<view class="bg-white margin-xs  flex" style="padding: 10px 5px;">
				<view class="flex align-center text-xxl" style="margin-right: 10px;">
					<view class="cuIcon-location text-red" style="font-size: 30px;"></view>
				</view>
				<view class="basis-xl" v-if="orderInfo.orderLogistics">
					<view class="content">
						<view class="text-bold" style="letter-spacing: 1px;margin-bottom: 5px;">{{orderInfo.orderLogistics.detailAddress}}</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								<text style="color: #666;font-size: 12px;">{{orderInfo.orderLogistics.addresseeName}}</text>
								<text style="color: #999;font-size: 12px;margin-left: 5px;">{{orderInfo.orderLogistics.telephone}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="dz-con" v-else>
					<text>美诗国际(望城总店)</text>
					<text>长沙市望城区高塘岭街道92号</text>
				</view>
			</view>
			<view class="bg-white radius-xl margin-xs">
				<view v-for="(item,index) in orderInfo.orderItemList" class="flex" :key="index">
					<view class="basis-xs margin-xs padding-sm radius">
						<view class="cu-avatar radius xl" :style="'background-image:url(' + item.picUrl + ')'">
						</view>
					</view>
					<view class="basis-xl margin-xs padding-sm radius">
						<view class="hx-overflow-2">
							{{item.spuName}}
						</view>
						<view v-if="item.specsInfo" class="text-gray">
							{{item.specsInfo}}
						</view>
						<view class="flex justify-between align-end padding-top-xs">
							<view class="text-bold text-df text-price" :class="'text-'+ theme.themeColor">
								{{item.paymentPrice}}
							</view>
							<view> x{{item.buyQuantity}}</view>
						</view>
						<view class="flex align-end justify-end padding-top-xs" v-if="orderInfo.payStatus == '1'">
							<navigator class="cu-btn sm text-gray" hover-class="none" v-if="item.status == '0'"
								:url="'/pages/order/order-refund/submit?orderItemId=' + item.id">申请售后</navigator>
							<navigator v-else class="cu-btn sm round " hover-class="none" :class="'bg-'+theme.matchColor"
								:url="'/pages/order/order-refund/index?orderItemId=' + item.id">{{item.statusDesc}}
							</navigator>
						</view>
					</view>
				</view>
				<view class="cu-bar" style="min-height: 80rpx;">
					<view class="action">
						<text class="cuIcon-title text-red"></text> 商品总价
					</view>
					<view class="action">
						<view class="text-black text-price">{{orderInfo.totalPrice}}</view>
					</view>
				</view>
				<view class="cu-bar" style="min-height: 80rpx;">
					<view class="action">
						<text class="cuIcon-title text-red"></text> 运费
					</view>
					<view class="action">
						<view class="text-black text-price">{{orderInfo.freightPrice}}</view>
					</view>
				</view>
				<view class="cu-bar" style="min-height: 80rpx;">
					<view class="action">
						<text class="cuIcon-title text-red"></text> 优惠金额
					</view>
					<view class="action">
						<text class="text-red padding-lr-xs">-</text>
						<view class="text-red text-price">{{orderInfo.couponPrice}}</view>
					</view>
				</view>
				<view class="cu-bar solid-bottom" style="min-height: 80rpx;">
					<view class="action">
						<text class="cuIcon-title text-red "></text> {{orderInfo.payStatus == '1'? '已付款' :'需付款'}}
					</view>
					<view class="action">
						<view class="text-red text-price text-bold text-xl">{{orderInfo.paymentPrice}}</view>
					</view>
				</view>
				<view class="cu-bar">
					<view class="action">
						订单编号
					</view>
					<view class="action">
						<view class="text-black">{{orderInfo.orderNo}}</view>
					</view>
				</view>
				<view class="cu-bar">
					<view class="action">
						创建时间
					</view>
					<view class="action">
						<view class="text-black">{{orderInfo.createTime}}</view>
					</view>
				</view>
				<view class="cu-bar" v-if="orderInfo.cancelTime">
					<view class="action">
						取消时间
					</view>
					<view class="action">
						<view class="text-black">{{orderInfo.cancelTime}}</view>
					</view>
				</view>
				<view class="cu-bar bg-white" style="min-height: 80rpx;" v-if="orderInfo.deliverTime">
					<view class="action">
						发货时间
					</view>
					<view class="action">
						<view class="text-black">{{orderInfo.deliverTime}}</view>
					</view>
				</view>
				<view class="cu-bar bg-white" style="min-height: 80rpx;" v-if="orderInfo.receiverTime">
					<view class="action">
						收货时间
					</view>
					<view class="action">
						<view class="text-black">{{orderInfo.receiverTime}}</view>
					</view>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
			<view class="cu-bar bg-white tabbar border foot justify-end">
				<!-- <order-operation :orderInfo="orderInfo" :isPay="isPay" @orderDel="orderDel($event,index)"
					@orderReceiver="orderReceiver($event,index)" @orderCancel="orderCancel($event,index)"></order-operation> -->
					<order-operation :orderInfo="orderInfo" :isPay="isPay" @orderDel="orderDel($event)"
						@orderReceiver="orderReceiver($event)" @orderCancel="orderCancel($event)"></order-operation>
			</view>
			
		</view>
		<view v-else>
			<u-empty text="没有数据喔" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import orderOperation from 'components/order-operation/index'
	import {
		getById
	} from '@/api/orderinfo.js';
	export default {
		components: {
			orderOperation
		},
		data() {
			return {
				theme: getApp().globalData.theme,
				pageDesign: {
					pageName: '订单详情'
				},
				orderInfo: {},
				timeData: {},
				isPay: false,
				id:''
			}
		},
		onShow() {
			this.getOrderDetail(this.id)
		},
		onLoad(option) {
			if (option.isPay) {
				this.isPay = option.isPay
			}
			if(option.id){
				this.id = option.id
			}
			getApp().initPage().then(res => {
				this.getOrderDetail(option.id)
			})
		},
		methods: {
			getOrderDetail(id) {
				getById(id).then(res => {
					this.orderInfo = res.data
				})
			},
			// orderCancel(item, index) {
			// 	this.getOrderDetail(item.id)
			// },
			// orderDel(item, index) {
			// 	// uni.navigateBack({
			// 	// 	delta: 1
			// 	// });
			// 	uni.navigateTo({
			// 		url:'/pages/order/order-list/index'
			// 	})
			// },
			// orderReceiver(item, index) {
			// 	this.getOrderDetail(item.id)
			// }
			
			orderCancel(item) {
				this.getOrderDetail(item.id)
			},
			orderDel(item) {
				// uni.navigateBack({
				// 	delta: 1
				// });
				uni.navigateTo({
					url:'/subpkg/order/order-list/index'
				})
			},
			orderReceiver(item) {
				this.getOrderDetail(item.id)
			}
			
		}
	}
</script>

<style lang="scss">
.u-empty{
	margin-top: 600rpx !important;
}
.dz-con{
	display: flex;
	flex-direction: column;
}
</style>
